<template>
    <div class="register">
        <!--register -->
        <div class="registerform">
            <el-card>

                <el-form
                    ref="registerform"
                    :label-position="labelPosition"
                    :rules="rules"
                    :model="registerform"
                    label-width="80px"
                >
                    <el-form-item class="in width" label="账号" prop="adminName">
                        <el-input
                            v-model="registerform.adminName"
                            placeholder="请输入账号"
                        ></el-input>
                    </el-form-item>

                    <el-form-item class="width" label="密码" prop="adminPwd">
                        <el-input
                            v-model="registerform.adminPwd"
                            placeholder="请输入密码"
                            show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="width" label="确认密码" prop="readminPwd">
                        <el-input
                            v-model="registerform.readminPwd"
                            placeholder="请确认密码"
                            show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="width" label="邮箱" prop="email">
                        <el-input
                            v-model="registerform.email"
                            placeholder="请输入邮箱"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="emailCode">
                        <el-input
                            v-model="registerform.emailCode"
                            placeholder="请输入邮箱验证码"
                            style="width: 44%"
                        ></el-input>
                        <el-button
                            type="primary"
                            style="position: absolute; right: 0"
                            @click="sendEmailCode"
                            :loading="codeLoading"
                        >发送验证码
                        </el-button
                        >
                    </el-form-item>

                    <el-form-item></el-form-item>
                    <el-button
                        type="primary"
                        size="medium"
                        @click="onSubmit('registerform')"
                    >注册账号
                    </el-button
                    >
                    <el-button
                        type="primary"
                        size="medium"
                        @click="resetForm('registerform')"
                    >重置
                    </el-button
                    >
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    name: "consultWebRegister",

    data() {
        let newPwd = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.registerform.adminPwd) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            labelPosition: "right",

            codeLoading: false,
            genderOptions: [
                {
                    value: "Male",
                    label: "男",
                },
                {
                    value: "Female",
                    label: "女",
                },
            ],
            registerform: {
                adminName: "",
                adminPwd: "",
                readminPwd: "",
                email: "",
                emailCode: "",
                gender: "",
                nickname: "",
            },
            rules: {
                adminName: [
                    {required: true, message: "请输入账号", trigger: "blur"},
                    {
                        pattern: /^[a-zA-Z][a-zA-Z0-9]{5,}$/,
                        message: "必须以字母开头，只包含字母和数字，且至少6位",
                        trigger: "blur",
                    },
                ],
                readminPwd: [
                    {required: true, message: "请确认密码", trigger: "blur"},
                    {required: true, validator: newPwd, trigger: "blur"},
                ],
                adminPwd: [{required: true, message: "请输入密码", trigger: "blur"}],
                email: [
                    {required: true, message: "请输入邮箱", trigger: "blur"},
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: ["blur", "change"],
                    },
                ],
                emailCode: [
                    {required: true, message: "请输入邮箱验证码", trigger: "blur"},
                    {min: 6, message: "验证码至少6位", trigger: "blur"},
                ],
                gender: [{required: true, message: "请选择性别", trigger: "blur"}],
                phone: [
                    {message: "请输入手机号", trigger: "blur"},
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: "请输入正确的手机号",
                        trigger: ["blur", "change"],
                    },
                ],
                nickname: [{required: true, message: "请输入昵称", trigger: "blur"}],
            },
        };
    },

    methods: {
        // 注册
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let newUser = {
                        username: this.registerform.adminName.trim(),
                        password: this.registerform.adminPwd.trim(),
                        email: this.registerform.email.trim(),
                        gender: this.registerform.gender.trim(),
                        nickname: this.registerform.nickname.trim()
                    };
                    // console.log(newUser);

                    // 发送请求
                    this.$api.user.register(newUser,this.registerform.emailCode).then((res) => {
                        if (res.data.status === 200) {
                            this.$message({
                                message: "注册成功",
                                type: "success",
                                duration: 1500,
                                onClose: () => {
                                    this.$router.replace("/");
                                },
                            });
                        } else {
                            this.$message({
                                message: res.data.message,
                                type: "error",
                                duration: 1500,
                            });
                        }
                    });

                    console.log("submit!", newUser);
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        // 发送邮箱验证码
        sendEmailCode() {
            this.codeLoading = true;
            if (this.registerform.email.trim() === "") {
                this.$message({
                    message: "请输入邮箱",
                    type: "error",
                });
                this.codeLoading = false;
                return;
            }
            // 60s内只能发送一次
            if (this.$storage.has("emailCode")) {
                let time = new Date().getTime() - this.$storage.get("emailCode");
                if (time < 60000) {
                    this.$message({
                        message: "还剩" + time / 1000 + "秒才能发送",
                        type: "error",
                    });
                    this.codeLoading = false;
                    return;
                }
            }
            // console.log(this.registerform.emailCode.trim());

            this.$api.common.sendEmailCode({
                userEmail: this.registerform.email.trim(),
                subject: "有趣新闻咨询注册验证码",
            })
                .then((res) => {
                    console.log(res.data);
                    if (res.data.status === 200) {
                        this.$message({
                            message: res.data.message,
                            type: "success",
                        });
                        this.$storage.set("emailCode", new Date().getTime());
                    } else {
                        this.$message({
                            message: "邮箱错误，请更换邮箱！",
                            type: "error",
                        });
                    }
                    this.codeLoading = false;
                }).catch(res=>{
                this.$message({
                    message: res.data.message,
                    type: "error",
                });
            });
        },
    },
};
</script>

<style lang="less" scoped>
.register {
    background-image: linear-gradient(34deg, #cc95c0, #dbd4b4, #7aa1d2);
    height: 100vh;

    .registerform {
        margin-top: 50px;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-card {
            width: 600px;

            .width {
                width: 70%;
            }

            .in {
                width: 50%;
                display: inline-block;
                margin-bottom: 30px;
            }
        }

        .clearfix {
            display: flex;
            justify-content: left;
            align-items: center;
            color: #5082f0;
            font-size: 30px;

            img {
                width: 40px;
                height: 40px;
                margin-right: 10px;
            }

            .back {
                margin-left: 200px;
                color: #5082f0;
                font-size: 20px;
            }
        }
    }
}
</style>
